<template>
  <div>
    <div id="container">
      <button @click="shows">show</button>
      <textarea id="write" rows="6" cols="60"></textarea>
      <ul v-show="isshow" id="keyboard" @click="test()">
        <li>
          <template v-if="!show">`</template><template v-if="show">~</template>
        </li>
        <li>
          <template v-if="!show">1</template><template v-if="show">!</template>
        </li>
        <li>
          <template v-if="!show">2</template><template v-if="show">@</template>
        </li>
        <li>
          <template v-if="!show">3</template><template v-if="show">#</template>
        </li>
        <li>
          <template v-if="!show">4</template><template v-if="show">$</template>
        </li>
        <li>
          <template v-if="!show">5</template><template v-if="show">%</template>
        </li>
        <li>
          <template v-if="!show">6</template><template v-if="show">^</template>
        </li>
        <li>
          <template v-if="!show">7</template><template v-if="show">&</template>
        </li>
        <li>
          <template v-if="!show">8</template><template v-if="show">*</template>
        </li>
        <li>
          <template v-if="!show">9</template><template v-if="show">(</template>
        </li>
        <li>
          <template v-if="!show">0</template><template v-if="show">)</template>
        </li>
        <li>
          <template v-if="!show">-</template><template v-if="show">_</template>
        </li>
        <li>
          <template v-if="!show">=</template><template v-if="show">+</template>
        </li>
        <li class="delete lastitem" id="no">delete</li>
        <li class="tab" id="no">tab</li>
        <li class="letter">q</li>
        <li class="letter">w</li>
        <li class="letter">e</li>
        <li class="letter">r</li>
        <li class="letter">t</li>
        <li class="letter">y</li>
        <li class="letter">u</li>
        <li class="letter">i</li>
        <li class="letter">o</li>
        <li class="letter">p</li>
        <li>
          <template v-if="!show">[</template><template v-if="show">{</template>
        </li>
        <li>
          <template v-if="!show">]</template><template v-if="show">}</template>
        </li>
        <li class="symbol lastitem">
          <template v-if="!show">\</template><template v-if="show">|</template>
        </li>
        <li class="capslock" id="no">caps lock</li>
        <li class="letter">a</li>
        <li class="letter">s</li>
        <li class="letter">d</li>
        <li class="letter">f</li>
        <li class="letter">g</li>
        <li class="letter">h</li>
        <li class="letter">j</li>
        <li class="letter">k</li>
        <li class="letter">l</li>
        <li>
          <template v-if="!show">;</template><template v-if="show">:</template>
        </li>
        <li>
          <template v-if="!show">'</template
          ><template v-if="show">&quot;</template>
        </li>
        <li class="return lastitem" id="no">return</li>
        <li class="left-shift" id="no" @click="change()">shift</li>
        <li class="letter">z</li>
        <li class="letter">x</li>
        <li class="letter">c</li>
        <li class="letter">v</li>
        <li class="letter">b</li>
        <li class="letter">n</li>
        <li class="letter">m</li>
        <li>
          <template v-if="!show">,</template
          ><template v-if="show">&lt;</template>
        </li>
        <li>
          <template v-if="!show">.</template
          ><template v-if="show">&gt;</template>
        </li>
        <li>
          <template v-if="!show">/</template><template v-if="show">?</template>
        </li>
        <li class="right-shift lastitem" id="no" @click="change()">shift</li>
        <li class="space lastitem" id="no">&nbsp;</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      isshow: true,
      htmlCode: {
        "&amp;": "&",
        '"': '"',
        "&lt;": "<",
        "&gt;": ">",
      },
    };
  },
  methods: {
    change() {
      this.show = !this.show;
    },
    test() {
      var input = document.getElementById("write");
      var e = window.event || test.caller.arguments[0];
      var el = e.target || e.srcElement;
      console.log(el.id);
      console.log(el.innerHTML);
      if (
        (el.tagName.toLowerCase() == "li" ||
          el.className.toLowerCase() == "letter") &&
        el.id.toLowerCase() !== "no"
      ) {
        var str = el.innerHTML;
        str =
          this.htmlCode[str.replace("<!---->", "")] ||
          str.replace("<!---->", "");
        input.value += str;
      }

      // if (el.innerHTML == "tab") {
      //   input.value += "  ";
      // }
      if (el.innerHTML == "delete") {
        input.value = input.value.slice(0, -1);
      }
      if (el.innerHTML == "caps lock") {
        var els = document.getElementsByClassName("letter");
        for (var i = 0, l = els.length; i < l; i++) {
          var str = els[i].innerHTML;
          if (/^[a-z]$/.test(str)) els[i].innerHTML = str.toUpperCase();
          if (/^[A-Z]$/.test(str)) els[i].innerHTML = str.toLowerCase();
        }
      }
      if (el.innerHTML == "return") {
        this.ctrKeyboard();
      }
    },
    shows() {
      // var el = document.getElementById("keyboard");
      // el.style.display = "block";
      this.isshow = !this.isshow;
    },
    ctrKeyboard() {
      // var el = document.getElementById("keyboard");
      // if (el.offsetWidth > 0) el.style.display = "none";
      // else {
      //   el.style.display = "block";
      // }
      // this.sortNum();
      // el.style.display = "none";
      this.isshow = false;
      this.show = false;
      this.capsInit();
    },

    capsInit() {
      var els = document.getElementsByClassName("letter");
      for (var i = 0, l = els.length; i < l; i++) {
        var str = els[i].innerHTML;
        if (/^[A-Z]$/.test(str)) els[i].innerHTML = str.toLowerCase();
      }
    },

    // sortNum() {
    //   // var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].sort(function () {
    //   //   return Math.random() > 0.5 ? 1 : -1;
    //   // });
    //   var els = document.getElementsByTagName("td");
    //   for (var i = 0, j = 0, l = els.length; i < l; i++) {
    //     var str = els[i].innerHTML;
    //     if (/^\d$/.test(str)) els[i].innerHTML = arr[j++];
    //   }
    // },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
  font-family: "Microsoft Yahei";
}

/* container */
#container {
  /* margin: 100px auto; */
  width: 688px;
}
#write {
  margin: 0 0 5px;
  padding: 5px;
  width: 671px;
  height: 200px;
  font-size: 16px;
  background: #fff;
  border: 1px solid #f9f9f9;
  /* -moz-border-radius: 5px;
  -webkit-border-radius: 5px; */
}
#keyboard {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #302e2e;
}
#keyboard li {
  float: left;
  margin: 0 5px 5px 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #fff;
  border: 1px solid #f9f9f9;
  cursor: pointer;
  /* -moz-border-radius: 5px;
  -webkit-border-radius: 5px; */
}
#keyboard li:hover {
  position: relative;
  top: 1px;
  left: 1px;
  border-color: #e5e5e5;
  background: #fff1c2;
}
.capslock,
.tab,
.left-shift {
  clear: left;
}
#keyboard .tab,
#keyboard .delete {
  width: 70px;
}
#keyboard .capslock {
  width: 80px;
}
#keyboard .return {
  width: 77px;
}
#keyboard .left-shift {
  width: 95px;
}
#keyboard .right-shift {
  width: 109px;
}
.lastitem {
  margin-right: 0;
}
.uppercase {
  text-transform: uppercase;
}
#keyboard .space {
  clear: left;
  width: 681px;
}
</style>
